<template>
  <div class="playlistdetails">
    <div class="base-info">
      <div class="left">
        <img class="image" :src="playinfo.coverImgUrl" />
      </div>
      <div class="right">
        <h3>
          <span
            :style="{
              color: themeColor,
              border: `0.0625rem solid ${themeColor}`
            }"
            >歌单</span
          >
          {{ playinfo.name }}
        </h3>
        <div class="right-item">
          <el-avatar :size="40" :src="userinfo.avatarUrl">
            <img
              src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
            />
          </el-avatar>
          <span class="name">{{ userinfo.nickname }}</span>
          <span>创建时间：{{ playinfo.updateTime | dateTime }}</span>
        </div>
        <div class="right-btn">
          <el-button
            plain
            icon="el-icon-video-play"
            title="全部播放"
            :style="{ background: themeColor }"
            @click="playmusic"
            >全部播放</el-button
          >
          <el-button plain icon="el-icon-folder-add"
            >收藏({{ playinfo.subscribedCount }})</el-button
          >
          <el-button plain icon="iconfont icon-fenxiang"
            >分享({{ playinfo.shareCount }})</el-button
          >
        </div>
        <div class="right-text">
          <p style="margin-bottom: 0.625rem" v-if="tags.length !== 0">
            标签：
            <span
              class="tag"
              style="color: #0c73c2"
              v-for="tag in tags"
              :key="tag"
              @click="toPlaylist(tag)"
              >{{ tag }}</span
            >
          </p>
          <div class="jianjie" :class="{ isopen: isOpen === false }">
            介绍：
            <div>
              <p
                class="album-desc"
                v-for="(item, index) in formatText(playinfo.description)"
                :key="index"
              >
                {{ item }}
              </p>
            </div>
          </div>
          <p class="open" v-if="textIndex > 6" @click="isOpen = !isOpen">
            <i
              :class="[
                { 'el-icon-arrow-down': isOpen === false },
                { 'el-icon-arrow-up': isOpen === true }
              ]"
            ></i
            >{{ isOpen == false ? "展开" : "收起" }}
          </p>
        </div>
      </div>
      <div class="num">
        <div class="music">
          <p>歌曲数</p>
          <p>{{ trackIds.length }}</p>
        </div>
        <div class="xian"></div>
        <div class="play">
          <p>播放量</p>
          <p>{{ playinfo.playCount }}</p>
        </div>
      </div>
    </div>
    <el-tabs ref="tab" v-model="activeName" @tab-click="handleClick">
      <!-- 音乐列表 -->
      <el-tab-pane label="歌曲列表" name="music">
        <ch-musiclist ref="musiclist" :playlist="playlist" />
      </el-tab-pane>
      <!-- 评论列表 -->
      <el-tab-pane name="comment">
        <span slot="label">评论({{ total }})</span>
        <ch-commentlist
          ref="playlist"
          :comments="comments"
          :hotcomments="hotcomments"
          :total="total"
          :page="page"
          :commentType="commentType"
          :t="t"
          :limit="limit"
          @currentChange="currentChange"
        />
      </el-tab-pane>
      <!-- 收藏 -->
      <el-tab-pane label="收藏者" name="collection">
        <ch-collectionlist :subscribers="playinfo.subscribers" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MusicList from "./components/musiclist";
import CommentList from "./components/commentlist";
import CollectionList from "./components/collectionlist";
import { getplaylisSongdetail } from "@/api/music.js";
import { songDetail, rankSongDetail } from "@/utils/detail.js";
import { getplaylistdetail, getplayliscomment } from "@/api/playlist.js";
export default {
  name: "PlaylistDetails",
  components: {
    "ch-musiclist": MusicList,
    "ch-commentlist": CommentList,
    "ch-collectionlist": CollectionList
  },
  props: {},
  beforeCreate() {
    // document.title = this.playinfo.name
  },
  data() {
    return {
      activeName: "music",
      tab: "",
      name: "",
      isOpen: false,
      playid: "",
      playinfo: "", //歌单信息
      userinfo: "", //用户信息
      trackIds: "", //歌曲列表
      comments: "", //评论列表
      hotcomments: "", // 精彩评论
      playlist: [], // 歌曲信息
      tags: [], // 标签列表
      ids: [], // 歌曲id
      total: 0, //评论数量
      limit: 40,
      page: 1,
      commentType: 2, // 评论类型
      t: 1, // 发送评论
      textIndex: ""
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {},
  created() {
    this.getplaylistdetail();
    this.getplayliscomment();
  },
  mounted() {},
  methods: {
    handleClick() {}, // 获取歌单信息
    async getplaylistdetail() {
      this.showLoading();
      const data = await getplaylistdetail({
        id: this.$route.query.id,
        s: 60
      });
      // console.log(data);
      this.playinfo = data.data.playlist;
      this.tags = data.data.playlist.tags;
      this.name = data.data.playlist.name;
      this.title();
      this.userinfo = data.data.playlist.creator;
      this.trackIds = data.data.playlist.trackIds;
      if (data.data.playlist.tracks.length > 20) {
        data.data.playlist.tracks.forEach(val => {
          let song = new rankSongDetail(val);
          this.playlist.push(song);
        });
      } else {
        for (let i of data.data.playlist.trackIds) {
          this.ids.push(i.id);
        }
        const playdata = await getplaylisSongdetail({
          ids: this.ids.join(",")
        });
        // console.log(playdata);
        playdata.data.songs.forEach(val => {
          let song = new songDetail(val);
          // console.log(val);
          this.playlist.push(song);
        });
        if (this.playlist.length > 0) {
          this.closeLoading();
        }
      }
    },
    // 获取歌单评论
    async getplayliscomment() {
      const data = await getplayliscomment({
        id: this.$route.query.id,
        limit: this.limit,
        offset: (this.page - 1) * this.limit
      });
      this.comments = data.data.comments;
      this.hotcomments = data.data.hotComments;
      this.total = data.data.total;
    }, // 分页
    currentChange(page) {
      this.page = page;
      this.getplayliscomment();
    }, // 循环简介
    formatText(text) {
      if (text) {
        let newText = text.split("\n");
        this.textIndex = newText.length;
        return newText;
      }
    },
    playmusic() {
      this.$refs.musiclist.allmusic();
    },
    // 跳转
    toPlaylist(name) {
      this.$router.push({
        name: "playlist",
        query: {
          cat: name
        }
      });
    }, // 改变title
    title() {
      document.title = this.name + " - 网抑云音乐";
    }
  }
};
</script>

<style scoped lang="scss">
.playlistdetails {
  .base-info {
    position: relative;
    width: 100%;
    // height: 18.125rem;
    display: flex;
    font-size: 1rem;
    // justify-content: space-between;
    // align-items: center;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
    padding: 0.9375rem 0;
    .left {
      width: 14.28571rem;
      height: 100%;
      // height: 18.125rem;
      // line-height: 18.125rem;;
      padding-right: 2.5rem;
    }
    .image {
      // display: block;
      width: 100% !important;
      padding: 0.3125rem;
    }
    .right {
      height: 100%;
      width: 80%;
      h3 {
        padding: 0.625rem 0;
        color: #000;
        font-weight: 700;
        span {
          padding: 0.125rem 0.625rem;
          border: 0.0625rem solid red;
          color: red;
          border-radius: 0.3125rem;
          font-weight: normal;
        }
      }
      .right-item {
        padding: 0.625rem 0;
        display: flex;
        align-items: center;
        .el-image {
          width: 1.875rem;
          height: 1.875rem;
          border-radius: 50%;
        }
        .name {
          display: inline-block;
          margin: 0 0.9375rem;
        }
      }
      .right-btn {
        display: flex;
        padding: 0.625rem 0;
        margin: auto 0;
      }
      /deep/.el-button {
        // display: flex;
        align-items: center;
        width: 12.1875rem;
        height: 3.125rem;
        .el-icon-video-play {
          font-size: 1.375rem;
          vertical-align: middle;
        }
        .el-icon-folder-add {
          font-size: 1.375rem;
          vertical-align: middle;
        }
        .icon-fenxiang {
          font-size: 1.375rem;
          vertical-align: middle;
        }
      }
      .el-button:nth-child(1) {
        background: red;
        color: #fff;
        // border: 0;
        // outline: none;
      }
      .right-text {
        .jianjie {
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 2;
          // overflow: hidden;
          color: #666;
          .album-desc {
            text-indent: 2em;
            line-height: 1.875rem;
            margin-top: 0.5rem;
          }
        }
        .tag {
          display: inline-block;
          padding: 0.3125rem;
          cursor: pointer;
        }
        .tag:hover {
          text-decoration: underline;
        }
        .open {
          float: right;
          color: #0c73c2;
          font-size: 0.875rem;
          padding-right: 0.625rem;
          cursor: pointer;
        }
        .isopen {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 6;
          overflow: hidden;
        }
      }
    }
    .num {
      display: flex;
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      .music {
        border-right: 1px solid #ccc;
        padding-right: 1.25rem;
      }
      .play {
        border-left: 1px solid #ccc;
        padding-left: 1.25rem;
      }
    }
  }
}
</style>
